/**
 * Created by zhaoxk on 2016/12/9.
 */
import React from 'react';
import _ from 'lodash';
import $ from 'jquery';
import {Input, Icon} from 'antd';
export default class SearchInput extends React.Component {
    state = {
        data: this.props.data,
        show: []
    };
    onFocus = e => {
        this.toggle('open');
        if (e.target.value) {
            this.handleSearch(e.target.value);
        }
    };
    onBlur = e => {
        if (this.props.needClear) {
            e.target.value = null;
        }
        const cb = () => {
            this.toggle();
        };
        setTimeout(cb, 100);
    };
    onChange = e => {
        this.handleSearch(e.target.value);
    };
    onCheck = code => {
        if (typeof this.props.handleCheck === 'function') {
            this.props.handleCheck(code);
        }
    };
    handleSearch = (filter) => {
        const originData = this.state.data,
            reg = new RegExp(filter.toUpperCase()),
            show = _.filter(originData, item => {
                if (reg.test(item.name) || reg.test(item.input)) {
                    return item;
                }
            });
        this.renderPanel(show);
    };
    toggle = type => {
        const panel = $('#_panel_');
        if (type === 'open') {
            this.renderPanel(this.state.data);
            panel.animate({
                maxHeight: '240px',
                opacity: 1
            }, 200);
        } else {
            panel.animate({
                maxHeight: '0px',
                opacity: '0'
            }, 200);
        }
    };
    renderPanel = data => {
        let show;
        if (data && data.length > 0) {
            const style = {
                display: 'block',
                fontSize: '12px',
                borderTop: '1px dotted #eee',
                padding: '1px 2px',
                cursor: 'pointer'
            };
            show = _.map(data, item => <span
                onClick={this.onCheck.bind(this, item)}
                key={item.code}
                name={item.input}
                style={style}
            >
                {item.name || item.code}
            </span>);
        } else {
            show = (
                <i
                    style={{
                        textAlign: 'center',
                        color: '#ccc',
                        fontSize: '14px',
                        padding: '10px 0',
                        display: 'block'
                    }}
                >
                    暂无备选项
                </i>);
        }
        this.setState({
            show
        });
    };

    render() {
        return (
            <div
                style={{
                    position: 'relative'
                }}
            >
                <Input
                    addonAfter={<Icon type="search"/>}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    onChange={this.onChange}
                />
                <div
                    id="_panel_"
                    style={{
                        position: 'absolute',
                        zIndex: 10,
                        left: 0,
                        width: '100%',
                        backgroundColor: '#fff',
                        border: '1px solid #ddd',
                        opacity: '0',
                        overflow: 'auto',
                        overflowX: 'hidden',
                    }}
                >
                    {this.state.show}
                </div>
            </div>
        );
    }
}
